import { h, defineComponent, withDirectives, resolveDirective } from "vue";
/* h：用于创建虚拟 DOM 元素的函数。
defineComponent：用于定义 Vue 组件。
withDirectives：用于在虚拟 DOM 上应用指令的函数。
resolveDirective：用于解析自定义指令的函数。 */

/** 封装@vueuse/motion动画库中的自定义指令v-motion */
export default defineComponent({
  name: "Motion",
  props: {
    delay: {
      type: Number,
      default: 50,
    },
  },
  render() {
    const { delay } = this;
    const motion = resolveDirective("motion"); //解析 motion 自定义指令。
    return withDirectives(
      h(
        "div",
        {},
        {
          default: () => [this.$slots.default()],
        }
      ),
      [
        [
          motion,
          {
            initial: { opacity: 0, y: 100 }, //initial：初始状态，opacity 为 0，y 轴位置为 100。
            enter: {
              //enter：进入状态，opacity 为 1，y 轴位置为 0。
              opacity: 1,
              y: 0,
              transition: {
                //transition：过渡配置，其中 delay 为从 props 中传入的 delay 值。
                delay,
              },
            },
          },
        ],
      ]
    );
  },
});
